<template>
    <!-- 巡检轨迹 -->
    <div style="padding: 20px;">
        <div class="trajectory-warp">
            <div class="trajectory-left">
                <el-card>
                    <div>
                        <span>日期</span>
                    </div>
                    <calendar @calendarFun="calendarFun" />
                </el-card>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>人员</span>
                    </div>
                    <div>
                        <div class="userList" :class="{ 'userStyle': userID == item.inspectionUserId }"
                            @click="userFun(item)" :key="index" v-for="(item, index) of userData">{{
                                item.nickName }}</div>
                    </div>
                </el-card>
            </div>
            <div class="trajectory-right">
                <div style="padding: 20px;">
                    <div id="container" ref="amap"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import AMapLoader from '@amap/amap-jsapi-loader'
import calendar from './calendar.vue'
import { taskRecordByDay, trackByUserDay } from "@/api/site/isRecord";
export default {
    data() {
        return {
            activeName: '',
            dayValue: '',
            map: '',
            userData: [],
            userID: '',
            lngLat: []
        };
    },
    components: {
        calendar
    },
    mounted() {
        this.initAMap();
    },
    created() {
        this.todayDate();
    },

    methods: {
        todayDate() {
            const now = new Date();
            const year = now.getFullYear();
            const month = (now.getMonth() + 1).toString().padStart(2, '0');
            const day = now.getDate().toString().padStart(2, '0');
            this.dayValue = `${year}-${month}-${day}`;
            this.taskRecordByDayFun();
        },
        taskRecordByDayFun() {
            taskRecordByDay({
                inspectionDate: this.dayValue
            }).then((res) => {
                this.userData = res.data
                if (res.data.length > 0) {
                    this.userID = res.data[0].inspectionUserId
                    this.trackByUserDayFun()
                }
            })
        },
        calendarFun(e) {
            this.dayValue = e;
            //日期
            this.taskRecordByDayFun();
        },

        initAMap() {
            window._AMapSecurityConfig = {
                securityJsCode: "249fc67c47f2650bfeec222499e82c16",
            };
            AMapLoader.reset()
            const _this = this
            AMapLoader.load({
                key: '37ab382ecdb27440a23c0a28853e8c86', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: []  // 需要使用的的插件列表，如比例尺'AMap.Scale'等，如果是地图控件，必须再 map.addControl添加
            })
                .then((AMap) => {
                    const map = new AMap.Map('container', {
                        // 设置地图容器id
                        viewMode: '2d', // 默认2d地图模式
                        zoom: 15, // 初始化地图级别
                        zooms: [5, 30], // 地图缩放范围
                        // 可以设置初始化当前位置
                        // center: [116.368904, 39.913423] // 初始化地图位置
                    })

                    // 模拟的轨迹点数组
                    const path = JSON.parse(JSON.stringify(_this.lngLat));
                    // 创建Polyline实例
                    const polyline = new AMap.Polyline({
                        path: path, // 轨迹的坐标数组
                        borderWeight: 2, // 线条宽度
                        strokeColor: 'blue', // 线条颜色
                        lineJoin: 'round' // 线条连接点样式
                    });

                    // 将轨迹添加到地图
                    polyline.setMap(map);
                    AMap.plugin(
                        [
                            'AMap.Geolocation',
                        ],
                        () => {
                            map.addControl(new AMap.Geolocation())
                        }
                    )
                    _this.map = map
                })
                .catch((e) => {
                    console.log(e)
                })
        },
        userFun(item) {

            this.userID = item.inspectionUserId

            this.trackByUserDayFun();
        },
        trackByUserDayFun() {
            let _this = this
            trackByUserDay({
                inspectionUserId: this.userID,
                inspectionDate: this.dayValue
            }).then((res) => {

                let arr = []
                for (let item of res.data) {
                    arr.push(item.signInLngLat.split(','))
                }

                // this.lngLat = res.data
                _this.lngLat = JSON.parse(JSON.stringify(arr))
                // _this.lngLat = [[113.67739, 34.75381], [113.69739, 34.79381]]
                setTimeout(() => {
                    _this.initAMap()
                }, 500)

            })
        }
    }
};
</script>
<style lang="scss" scoped>
#container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 750px;
}

.prescription_warp {
    display: flex;
    margin: 10px 0;

    .prescription_line {
        width: 4px;
        height: 16px;
        background: #409EFF;

    }

    .prescription_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 16px;
        color: #2F2F2F;
        line-height: 16px;
        margin-left: 5px;
    }

}

.trajectory-warp {
    display: flex;

    .trajectory-left {
        width: 450px;
    }

    .trajectory-right {
        flex: 1;
    }
}

.box-card {
    height: 350px;
    overflow-y: scroll;
}

.userList {
    cursor: pointer;
}

.userStyle {
    color: #409EFF;
}

::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
}
</style>